<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>echarts的基本使用01</title>
<!--  引入echarts.js包-->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.js"></script>
  <style >
    *{
      margin:0px 0px;
    }
    .div{
      border:1px black;
    }
  </style>
</head>
<body>
  <div id="main" style="width:800px;height:600px"></div>
</body>
<script>


  let ROOT_PATH = 'https://echarts.apache.org/examples';
  //捕获元素dom
  // let dom=document.getElementById('main');
  const dom = document.querySelector('div');
  //创建echarts实例
  let myechart = echarts.init(dom);
    option1 = {
      legend: {
        top: 'bottom'
      },
      toolbox: {
        show: true,
        feature: {
          mark: {show: true},
          dataView: {show: true, readOnly: false},
          restore: {show: true},
          saveAsImage: {show: true}
        }
      },
      series: [
        {
          name: 'Nightingale Chart',
          type: 'pie',
          radius: [50, 250],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 8
          },
          data: [
            {value: 40, name: 'rose 1'},
            {value: 38, name: 'rose 2'},
            {value: 32, name: 'rose 3'},
            {value: 30, name: 'rose 4'},
            {value: 28, name: 'rose 5'},
            {value: 26, name: 'rose 6'},
            {value: 22, name: 'rose 7'},
            {value: 18, name: 'rose 8'}
          ]
        }
      ]
    },
    option2 = {
      //标题
      title: {
        text: 'echarts的基本使用01',
        //子标题
        // subtext:'子标题',
        left: 'left',
        textStyle: {
          color: '#29d'
        }
      },
      //x轴
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      //y轴
      yAxis: {
        show: true,
        //展示y轴线
        axisLine: {
          show: true,
        },
        //展示刻度
        axisTick: {
          show: true,
        }
      },
      //说明，图例
      legend: {
        data: ['销量', '价格']
      },
      tooltip: {},
      //展示图形（条形图、折线图）的系列配置series
      series: [
        {
          type: 'bar',
          name: '销量',
          data: [5, 20, 36, 10, 10, 20],
          color: '',
          label: {
            show: true
          }
        },
        {
          type: 'bar',
          name: '价格',
          data: [8, 16, 33, 11, 6, 17],
          color: '',
          label: {
            show: true
          }
        }
      ]
    },
    option3 = {
      backgroundColor: '#000',
      globe: {
        baseTexture: ROOT_PATH + '/data-gl/asset/world.topo.bathy.200401.jpg',
        heightTexture: ROOT_PATH + '/data-gl/asset/world.topo.bathy.200401.jpg',
        displacementScale: 0.04,
        shading: 'realistic',
        environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
        realisticMaterial: {
          roughness: 0.9
        },
        postEffect: {
          enable: true
        },
        light: {
          main: {
            intensity: 5,
            shadow: true
          },
          ambientCubemap: {
            texture: ROOT_PATH + '/data-gl/asset/pisa.hdr',
            diffuseIntensity: 0.2
          }
        }
      }
    },
    myechart.setOption(option2)


</script>
</html>
